<template>
  <div class="box">
    <div class="head">
      <a-breadcrumb>
        <a-breadcrumb-item
          ><a @click="linkTo(0)">标定研究数据</a></a-breadcrumb-item
        >
        <a-breadcrumb-item v-if="state.level > 0"
          ><a @click="linkTo(1)">{{ state.childLabel }}</a></a-breadcrumb-item
        >
        <a-breadcrumb-item v-if="state.level > 1">{{
          state.infoLabel
        }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="table">
      <ChildPage
        v-if="state.level === 1"
        @onInfo="onInfo"
        :childLabel="state.childLabel"
      />
      <InfoPage v-else-if="state.level === 2" :infoLabel="state.infoLabel" />
      <FatherPage v-else @onChild="onChild" />
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import FatherPage from "./fatherPage.vue";
import ChildPage from "./childPage.vue";
import InfoPage from "./infoPage.vue";

const state = reactive({ level: 0, childLabel: null, infoLabel: null });

const onChild = (v) => {
  state.childLabel = v;
  state.level = 1;
};

const onInfo = (v) => {
  state.infoLabel = v;
  state.level = 2;
};

const linkTo = (level) => {
  state.level = level;
  if (level === 0) {
    state.childLabel = null;
    state.infoLabel = null;
  } else if (level === 1) {
    state.infoLabel = null;
  }
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  padding: 2px;
  background: #262626;

  .head {
    background-color: #1c1c1c;
    padding: 8px 4px;
    margin-bottom: 4px;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .table {
    height: calc(100% - 38px);
    width: 100%;
    overflow-y: auto;
  }
}
</style>
